<template>
	<view>
		<up-loading-page :loading="true" loadingText="loading..." v-if="showLoading"></up-loading-page>
	</view>
	<view class="layout" v-show="!showLoading">
		<cu-custom :isBack="true" background="rgba(226, 226, 226, 0.1)" :needFill="true">
			<block slot="content">查看物流</block>
		</cu-custom>
		<!--地图位置-->
		<view class="group1">
			
		</view>
		
		<view class="group2">
			<view class="parse1">
				<view class="text1">物流消息</view>
				<view class="t1">
					<view class="text2">顺丰物流 8905857187757</view>
					<up-copy style="margin: 10rpx 0 0 10rpx;" content="8905857187757">
						<view style="width: 90rpx; line-height: 38rpx; height: 38rpx; border-radius: 19rpx; box-sizing: border-box; padding: 0 0 0 22rpx;
						border: 1px solid #efefef; font-size: 22rpx; color: #666666;">复制</view>
					</up-copy>
				</view>
			</view>
			<view class="parse2">
				<!--此处为物流进度条-->
				<view class="common-logistics">
				    <template v-for="(item, index) in logList" :key="index">
				        <zh-logistics-item :logistics-data="item"></zh-logistics-item>
				    </template>
				</view>
			</view>
		</view>
		
		<view class="group3">
			<button class="btn">确认收货</button>
		</view>
	</view>
</template>

<script setup>
	import { ref, onMounted } from 'vue'
	import { onLoad,onShareAppMessage,onShareTimeline, } from '@dcloudio/uni-app'
	import request from '../../common/request';
	import zhLogisticsItem from "@/components/zh-logistics-item/zh-logistics-item.vue";
	// import AddressPicker from '@/components/lingdang-AddressPicker/AddressPicker.vue'
	// 加载动画
	const showLoading = ref(true)
	const addressid = ref(0)
	
	onMounted(() => {
		setTimeout(() => {
			showLoading.value = false;
		}, 1000);
	});

// 物流信息
const logList = ref([{
                info: '派送成功',
                status: 7,
                statusLabel: "已签收",
                time: '2021-11-11 17:42'
            },
            {
                info: '[代收点] 您的快件已从XXX顺丰速运代理店取出〖来自代收点〗',
                status: 0,
                time: '2021-11-11 17:31'
            },
            {
                info: '快件领取成功',
                status: 0,
                time: '2021-11-11 17:31'
            },
            {
                info: '[代收点] 您的顺丰速运包裹已由XXX顺丰速运代理店代收，代收点地址：XXX， ： 〖来自代收点〗',
                status: 6,
                statusLabel: "代取件",
                time: '2021-11-11 17:15'
            },
            {
                info: '快件交给XXX，正在派送途中（：，顺丰已开启“安全呼叫”保护您的电话隐私，请放心接听！）（主单总件数：1件）',
                status: 5,
                statusLabel: "派送中",
                time: '2021-11-11 17:07'
            },
            {
                info: '快件到达〖XXX合作点〗',
                status: 4,
                statusLabel: "运输中",
                time: '2021-11-11 16:25'
            },
            {
                info: '快件在〖XXX营业点〗完成分拣，准备发往〖XXX合作点〗',
                status: 0,
                time: '2021-11-11 13:50'
            },
            {
                info: '快件到达〖XXX营业点〗',
                status: 0,
                time: '2021-11-11 13:06'
            },
            {
                info: '快件到达〖XXX转场〗',
                status: 0,
                time: '2021-11-11 05:36'
            },
            {
                info: '顺丰速运已收取快件',
                status: 3,
                statusLabel: "已揽件",
                time: '2021-11-10 21:54'
            },
            {
                info: '包裹正在等待揽收',
                status: 2,
                statusLabel: "已发货",
                time: '2021-11-10 17:41'
            },
            {
                info: '商品已经下单',
                status: 1,
                statusLabel: "已下单",
                time: '2021-11-10 12:17'
            }
        ])

</script>

<style lang="scss" scoped>
.layout {
	background: #f0f2f5;
	.group1{
		
	}
	.group2{
		width: 710rpx;
		margin-top: 460rpx;
		background-color: #ffffff;
		border-radius: 10rpx;
		margin-left: 20rpx;
		.parse1{
			.text1{
				font-size: 28rpx;
				// font-weight: bold;
				padding-left: 23rpx;
				padding-top: 57rpx;
				font-weight: 800;
			}
			.t1{
				display: flex;
				.text2{
					font-size: 28rpx;
					padding-left: 23rpx;
					padding-top: 10rpx;
					color: #666666;
				}
				.text3{
					font-size: 22rpx;
					padding-left: 32rpx;
				}
			}
		}
		
		// 物流
		.parse2{
			// height: 1200rpx;
			// border: 1px solid red;
			// padding: 0 0 0 100rpx;
			.common-logistics {
				padding: 45rpx 0 120rpx 101rpx;
				// border: 1px solid #efefef;
				// margin: 45rpx;
			}
		}
		
	}
	.group3{
		height: 110rpx;
		width: 750rpx;
		background-color: #ffffff;
		border-radius: 20rpx 20rpx 0rpx 0rpx;
		position: fixed;
		bottom: 0rpx;
		.btn{
			font-size: 28rpx;
			width: 200rpx;
			border-radius: 35rpx;
			background-color: #18288F;
			color: #ffffff;
			margin-left: 520rpx;
			margin-top: 20rpx;
		}
	}
	}
</style>
